<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            padding: 4px 8px;
            margin: 10px;
            outline: none;
            border: none;
        }
        .not-allowd {
            cursor: not-allowed;
        }
        .active {
            background-color: #56a5f1;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>当前是第{{currentPage}}页</div>
        <!-- 看第一页时禁用 -->
        <button :class="{'not-allowd': currentPage === 1}" @click="change('-')">上一页</button>
        <!-- 激活：页码数=序号 -->
        <button
            :class="['btn', {active: currentPage === page}]"
            v-for="page in totalPage"
            @click="change(page)"
        >-{{page}}-</button>
        <!-- 看最后一页时禁用 -->
        <button :class="{'not-allowd': currentPage === totalPage}" @click="change('+')">下一页</button>
        <hr>
        <hr>
        <p>九九乘法表</p>
        <p v-for="j in 9">
            <span v-for="i in j">{{i}} * {{j}} = {{i*j}}</span>
        </p>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                currentPage: 1,
                totalPage: 5
            },
            methods: {
                change(page) {
                    if (page === '-') {
                        // 上一页,页码数大于一才可以减
                        this.currentPage > 1 ? this.currentPage-- : ''
                    } else if (page === '+') {
                        // 下一页,页码数小于最后一页才能加
                        this.currentPage < this.totalPage ? this.currentPage++ : ''
                    } else {
                        this.currentPage = page;
                    }
                }
            }
        })
    </script>
</body>

</html>